<template>
  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
    <div class="w-1/4 xl:w-1/5 m-2 overflow-hidden bg-white">
      <div class="h-full overflow-auto pb-2">
        <DeptTree @select="handleSelect" @ok="onClose" ref="treeRef" />
      </div>
    </div>
    <div class="mt-2 mb-2 w-3/4 xl:w-4/5 bg-white">
      <Tabs v-model:activeKey="activeKey" centered class="h-full">
        <template v-if="!deptCode">
          <div class="w-full h-full flex justify-center items-center">
            <Empty :image="simpleImage" description="请选择某个部门" />
          </div>
        </template>
        <template v-else>
          <TabPane v-for="item in tabList" :key="item.component" :tab="item.title" class="h-full">
            <!-- forceRender -->
            <component :is="item.component" :parent-model="item" />
          </TabPane>
        </template>
      </Tabs>
    </div>
  </PageWrapper>
</template>
<script lang="ts">
  import { defineComponent, reactive, ref, computed, unref, provide, readonly } from 'vue';
  import { PageWrapper } from '/@/components/Page';
  import { Tabs, TabPane, Empty } from 'ant-design-vue';
  import DeptTree from './modules/deptTree/DeptTree.vue';
  import MonthlyPerformanceStatistics from './modules/monthlyPerformanceStatistics/MonthlyPerformanceStatistics.vue';
  import MonthlyProcessProcessingTimes from './modules/monthlyProcessProcessingTimes/MonthlyProcessProcessingTimes.vue';
  import MonthlyAveragePerformance from './modules/monthlyAveragePerformance/MonthlyAveragePerformance.vue';

  export default defineComponent({
    name: 'PerformanceStatistics',
    components: {
      PageWrapper,
      Tabs,
      TabPane,
      DeptTree,
      MonthlyPerformanceStatistics,
      MonthlyProcessProcessingTimes,
      MonthlyAveragePerformance,
      Empty,
    },
    setup() {
      const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
      const treeRef: any = ref(null);
      const deptCode = ref('');
      function handleSelect(deptId = '', trc) {
        console.log('handleSelect', { deptId, trc });
        deptCode.value = deptId;
      }

      provide('deptCode', readonly(deptCode));
      function onClose(e?: number) {
        if (e != 1) {
          //1是新增，不用清空
        }
      }
      const activeKey = ref('MonthlyPerformanceStatistics');
      //tabs
      const tabList = ref([
        {
          title: '月绩效统计',
          key: 'MonthlyPerformanceStatistics',
          component: 'MonthlyPerformanceStatistics',
        },
        {
          title: '月流程处理次数',
          key: 'MonthlyProcessProcessingTimes',
          component: 'MonthlyProcessProcessingTimes',
        },
        {
          title: '月平均绩效',
          key: 'MonthlyAveragePerformance',
          component: 'MonthlyAveragePerformance',
        },
      ]);

      return {
        handleSelect,
        treeRef,
        onClose,
        tabList,
        activeKey,
        deptCode,
        simpleImage,
      };
    },
  });
</script>
<style lang="less" scoped>
  :deep(.ant-card-head) {
    min-height: 37px;
  }
  :deep(.ant-card-head-title) {
    padding: 0;
    line-height: 35px;
  }

  :deep(.ant-tabs-content) {
    height: 100%;
  }
</style>
